import React from 'react'
import '../../styles/provideo/recommend.css'
import { reMV, getMv } from '../../api/mp3'

class Recommend extends React.Component {
    constructor() {
        super()
        this.state = {
            data: [],
            vurl: ''
        }
    }

    async componentDidMount() {
        // await reMV().then(res => {
            // console.log(res)
            // let data = res.data.data
            // this.setState({ data: data })
        // }).catch(err => err)
    }
    render() {
        let { data } = this.state
        // console.log(data[0])
        return (
            <div className='pro-rec-wrap'>
                <ul className='vid-msg-list'>
                    {data.map((item, i) => {
                        // console.log(item.id)
                        getMv(item.id).then(res => {
                            let vurl = res.data.data.url
                            this.setState({ vurl: vurl })
                        })
                        return (
                            <li key={i} className='vid-msg'>
                                <div>
                                    <p>{item.artistName}</p>
                                    <img src={item.cover} alt="" />
                                </div>
                                <div>
                                    <video src={this.state.url} type='mp4'></video>
                                </div>
                            </li>
                        )
                    })}
                </ul>
            </div>
        )
    }
}

export default Recommend